<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>php 使用 SMTP 邮件服务器发送邮件</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <meta name="renderer" content="webkit">
  <meta name="force-rendering" content="webkit"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .modal-header {
      display: block;
    }
  </style>
</head>
<body>

  <form id="senMail">
    <div class="modal-header">
      <div class="form-row">
        <div class="form-group col-md-3">
          <label for="mailserver">smtp服务器</label>
          <input type="text" class="form-control" id="mailserver" name="mailserver" placeholder="请输入 smtp 服务器" value="smtp.163.com" required>
        </div>
        <div class="form-group col-md-3">
          <label for="name">smtp端口</label>
          <input type="text" class="form-control" id="port" name="port" placeholder="请输入 smtp 端口" value="25" required>
        </div>
        <div class="form-group col-md-3">
          <label for="name">发件人邮箱</label>
          <input type="email" class="form-control" id="mailuser" name="mailuser" placeholder="请输入 smtp 服务器" required>
        </div>
        <div class="form-group col-md-3">
          <label for="name">发信邮箱授权码</label>
          <input type="text" class="form-control" id="mailpass" name="mailpass" placeholder="请输入发信邮箱授权码" required>
        </div>
      </div>
      <div class="form-row">
        <div class="form-group col-md-6">
          <label for="subject">标题</label>
          <input type="text" class="form-control" id="subject" name="subject" placeholder="请输入标题" required>
        </div>
        <div class="form-group col-md-6">
          <label for="mailto">收件人邮箱</label>
          <input type="email" class="form-control" id="mailto" name="mailto" placeholder="请输入收件人邮箱" required>
        </div>
      </div>
    </div>
    <div class="modal-body" id="content" name="content"></div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
      <button type="submit" class="btn btn-primary">提交</button>
    </div>
  </form>

  <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/wangEditor/3.1.1/wangEditor.min.js"></script>
  <script>
    $(document).ready(function() {
      // 富文本编辑器
      var E = window.wangEditor
      var editor = new E('#content')
      editor.customConfig.menus = [
          'head', // 标题
          'bold', // 粗体
          'fontSize', // 字号
          'fontName', // 字体
          'italic', // 斜体
          'underline', // 下划线
          'strikeThrough', // 删除线
          'foreColor', // 文字颜色
          'backColor', // 背景颜色
          'link', // 插入链接
          'list', // 列表
          'justify', // 对齐方式
          'quote', // 引用
          'emoticon', // 表情
          'image', // 插入图片
          'table', // 表格
          'video', // 插入视频
          'code', // 插入代码
          'undo', // 撤销
          'redo' // 重复
      ];
      editor.create();

      /**
      * [点击发送邮件]
      */
      $('#senMail').submit(function(event) {
        event.preventDefault();
        //Ajax POST发送
        $.ajax({
          type: 'post',
          url: '/static/demo/sendmail/send.php',
          data: {
            mailserver: $('#mailserver').val(),
            port: $('#port').val(),
            mailuser: $('#mailuser').val(),
            mailpass: $('#mailpass').val(),
            mailto: $('#mailto').val(),
            subject: $('#subject').val(),
            content: editor.txt.html()
          },
          dataType: "json",
          success: function(res) {
            console.log(res);
            if(res.status === 'success') {
              alert('邮件发送成功！');
            }
          },
          error: function() {
            console.log('请求失败');
          }
        })
      })
    });
  </script>
</body>
</html>